<template>
	<view class="show_box">
		<swiper :indicator-dots="false" :vertical="true" style="height: 100%;" @change="handleSlider"
			:current="videoIndex">
			<swiper-item v-for="(item,index) in vlist" :key="index">
				<view class="video_content">
					<view class="swiper-item">
						<video :id="'myVideo' + index" :ref="'myVideo' + index" :style="{ height:windowHeight+'px' }"
							style="width: 100%;" object-fit="cover" :src="item.src" @click="handleClicked(index)"></video>
					</view>
					<!-- 中间播放按钮 -->
					<view class="vd-cover" @click="handleClicked(index)"><text v-if="!isPlay"
							class="iconfont icon-bofang" style="color: #FFFFFF; font-size: 100rpx;"></text></view>
					<view class="video_title">
						{{item.video_title}}
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	let timer = null
	export default {
		data() {
			return {
				videoIndex: 0,
				isPlay: true,
				windowHeight: 0,
				vlist: [{
					src: ''
				}],
				triggered: false
			}
		},
		onLoad() {

		},
		onShow() {
			setTimeout(function() {}, 1000);
			uni.startPullDownRefresh();
		},
		mounted() {
			var that = this;
			uni.getSystemInfo({
				success(res) {
					that.windowHeight = res.windowHeight
				}
			})
		},
		onPullDownRefresh() {
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
			this.showVideo()
		},
		methods: {
			showVideo() {
				uni.request({
					url: 'http://localhost:8081/video/getAll',
					method: 'GET',
					success: (res) => {
						//if (res.data.state == 200) {
						this.vlist = res.data
						this.videoContextList = []
						for (var i = 0; i < this.vlist.length; i++) {
							// this.videoContextList.push(this.$refs['myVideo' + i][0])
							this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
						}
					}
				});
			},
			// 滑动切换
			handleSlider(e) {
				let curIndex = e.detail.current
				if (this.videoIndex >= 0) {
					this.videoContextList[this.videoIndex].pause()
					this.videoContextList[this.videoIndex].seek(0)
					this.isPlay = false
				}
				if (curIndex === this.videoIndex + 1) {
					this.videoContextList[this.videoIndex + 1].play()
					this.isPlay = true
				} else if (curIndex === this.videoIndex - 1) {
					this.videoContextList[this.videoIndex - 1].play()
					this.isPlay = true
				}
				this.videoIndex = curIndex
			},
			// 播放
			play(index) {
				this.videoContextList[index].play()
				this.isPlay = true
			},
			// 暂停
			pause(index) {
				this.videoContextList[index].pause()
				this.isPlay = false
			},
			// 点击视频事件
			handleClicked(index) {
				if (this.isPlay) {
					this.pause(index)
				} else {
					this.play(index)
				}

			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	view {
		height: 100%;
	}

	.video_content {
		position: relative;
		.vd-cover{
			
			z-index: 1;
			 margin: auto;
			  position: absolute;
			  top: 42%; left: 44%;
		}
		.video_title {
			position: absolute;
			top: 40rpx;
			left: 40rpx;
			z-index: 1;
			color: #FFFFFF;
			font-size: 40rpx;
		}
	}
</style>
